<script setup lang="ts">
import { useDebounceFn } from '@vueuse/core'
import Statistics from './components/Statistics.vue'
import StudentFormDialog from './StudentFormDialog.vue'
import EnrollPermissionImportPanel from './EnrollPermissionImportPanel.vue'
import StudentStatus from './components/StudentStatus.vue'
import CellParentInfo from '@/components/ProCell/CellParentInfo.vue'
import { StudentApi } from '@/apis'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useDictFilterOptions, useDictLabel, useForm, useTable } from '@/hooks'
import { useUserStore } from '@/stores'
import getAvatar from '@/utils/avatar'

defineOptions({ name: 'Student' })

const router = useRouter()
const userStore = useUserStore()

const { form, resetForm } = useForm<StudentApi.StudentQuery>({
  keyword: undefined,
  source: undefined,
  enrollStatus: undefined,
})

const {
  tableData,
  loading,
  pagination,
  search,
  handleDelete,
} = useTable(pagination => StudentApi.getStudentPage({ ...form, ...pagination }))

const columns: TableInstanceColumns[] = [
  {
    title: '姓名',
    slotName: 'name',
    minWidth: 120,
    fixed: 'left',
  },
  { title: '联系方式', dataIndex: 'parentPhone', slotName: 'parentPhone', width: 220 },
  { title: '性别', dataIndex: 'gender', slotName: 'gender', width: 100 },
  { title: '入学年份', dataIndex: 'admissionYear', width: 100 },
  { title: '状态', dataIndex: 'enrollStatus', slotName: 'enrollStatus', width: 90, align: 'center', filterable: {
    filters: useDictFilterOptions('EnrollStatusEnum'),
    multiple: true,
  } },
  { title: '推荐人', dataIndex: 'recommender', width: 130 },
  { title: '招生来源', dataIndex: 'source', render: ({ record }) => useDictLabel('StudentSource', record.source) },
  {
    title: '操作',
    slotName: 'action',
    width: 120,
    align: 'center',
    fixed: 'right',
    show: userStore.hasPermission(['education:student:write']),
  },
]

// 筛选
const onFilterChange = (dataIndex, filteredValues) => {
  form[dataIndex] = filteredValues
}

const studentFormAddRef = ref<InstanceType<typeof StudentFormDialog>>()
// 新增
const onCreate = () => {
  studentFormAddRef.value?.open()
}

// 删除
const onDelete = (row) => {
  return handleDelete(() => StudentApi.removeStudent(row.id), {
    content: `是否确定删除[${row.name}]？`,
    showModal: true,
  })
}

// 上传
const EnrollPermissionImportPanelRef = ref<InstanceType<typeof EnrollPermissionImportPanel>>()
const onPermissionImport = () => {
  EnrollPermissionImportPanelRef.value?.open()
}

// 详情
const onDetail = (row) => {
  router.push({ path: '/shop/enrollment/student/detail', query: { id: row.id } })
}

// 创建报名订单
const onCreateOrder = (row) => {
  router.push({ path: '/shop/enrollment/order/create', query: { studentId: row.id } })
}

const statRef = ref<InstanceType<typeof Statistics>>()

const refresh = () => {
  resetForm()
  search()
}

const debouncedSearch = useDebounceFn(() => {
  search()
}, 200)

watch(() => form, (_) => {
  debouncedSearch()
}, { deep: true })
</script>

<template>
  <ProPage title="学员管理" description="对学员进行统一管理">
    <template #title-right>
      <Statistics ref="statRef" />
    </template>
    <template #extra>
      <a-space>
        <a-button type="text" @click="onPermissionImport">
          报名权限导入
        </a-button>
        <a-button type="primary" @click="onCreate">
          <template #icon>
            <icon-plus />
          </template>
          <template #default>
            添加学生
          </template>
        </a-button>
      </a-space>
    </template>
    <ProTable
      :show-index="true"
      :data="tableData"
      :columns="columns"
      :loading="loading"
      :pagination="pagination"
      @refresh="refresh"
      @filter-change="onFilterChange"
    >
      <template #toolbar-left>
        <a-space size="large">
          <a-input v-model="form.keyword" placeholder="根据姓名、拼音、手机号模糊查询" allow-clear style="width: 300px;">
            <template #prefix>
              <icon-search />
            </template>
          </a-input>
        </a-space>
      </template>
      <template #name="{ record }">
        <CellAvatar :avatar="getAvatar(record.avatar, record.gender)" :name="record.name" is-link @click="onDetail(record)" />
      </template>
      <template #gender="{ record }">
        <CellGender :gender="record.gender" />
      </template>
      <template #enrollStatus="{ record }">
        <StudentStatus :status="record.enrollStatus" />
      </template>
      <template #parentPhone="{ record }">
        <CellParentInfo :phone="record.parentPhone" :relation="record.parentRelation" />
      </template>
      <template #action="{ record }">
        <a-space>
          <a-link v-permission="['shop:order:manage']" @click="onCreateOrder(record)">
            报名
          </a-link>
          <a-link v-permission="['edu:student:manage']" @click="onDelete(record)">
            删除
          </a-link>
        </a-space>
      </template>
    </ProTable>
    <StudentFormDialog ref="studentFormAddRef" @ok="search" />
    <EnrollPermissionImportPanel ref="EnrollPermissionImportPanelRef" @change="search" />
  </ProPage>
</template>

<style lang="less" scoped>
</style>
